<template>
    <div class="form-sty">
        <div class="form-title" >
            <div class="span-radius"></div>
            观查人数
        </div>
        <div class="" >
            <div style="height:270px" ref="zhexian"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';



    const line = ref([10, 20, 30, 40, 50])
    const lineyue = ref(['1月', '2月', '3月', '4月', '5月'])

        const zhexian = ref(null);

        const initChart = () => {
            const myChart = echarts.init(zhexian.value);
            myChart.hideLoading();

            const option = {
                // backgroundColor: 'black',
                color: ['#2adecf'],
                textStyle: {
                    color: 'rgb(222,222,222)',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['重点观察'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: [{
                    data: lineyue.value,
                    axisLine: {
                        show: true
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {}
                },
                {
                    type: 'value',
                    // name: '累计百分比(%)  ',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {}
                }
                ],
                series: [{
                    name: '重点观察',
                    type: 'bar',
                    barWidth: '50%',
                    itemStyle: {
                        normal: {
                            barBorderRadius: [30, 30, 0, 0],
                            color: new echarts.graphic.LinearGradient(
                                0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#719aff'
                                }, {
                                    offset: 1,
                                    color: '#51c3ff'
                                }]
                            )
                        }
                    },
                    data: line.value
                }, 

            ]
            }

            myChart.setOption(option);
        };

        onMounted(async () => {
            initChart()
        });

</script>

<style scoped>
@import "@/Css/index.css";
</style>